<template>
  <div>
    <div style="margin: 10px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{forumName}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="topic">板块公告</div>
    <postlist :posts="announcements"
              :isAnnouncement="1"
              id="announcementList" />
    <el-divider />
    <div class="topic">本版帖子</div>
    <postlist :posts="posts"
              :isAnnouncement="0"
              id="postList" />

    <!-- 管理员用户 选择公告或帖子 -->
    <div style="margin: 10px 0px 0px 10px; width: 800px;"
         v-if="userPower !== 0">
      <span>类型：</span>
      <template>
        <el-radio v-model="postType"
                  label="post">帖子</el-radio>
        <el-radio v-model="postType"
                  label="notice">公告</el-radio>
      </template>
    </div>

    <div style="margin: 10px 0px 0px 10px; width: 800px;">
      <el-input v-model="title"
                placeholder="请输入标题"
                :disabled="!login"
                size="small"></el-input>
    </div>

    <wangeditor style="margin: 10px;"
                v-model="postContent"
                ref="editor"></wangeditor>
    <el-button type="primary"
               @click="post"
               style="margin-left: 10px;"
               :disabled="!login">发帖</el-button>
  </div>
</template>

<script>
import postlist from '../components/PostList.vue'
import wangeditor from '../components/WangEditor.vue'
export default {
  name: 'Forum',
  components: {
    postlist,
    wangeditor
  },
  data () {
    return {
      forumName: '',
      title: '',
      postContent: '',
      announcements: [],
      posts: [],
      postType: 'post'
    }
  },
  methods: {
    post () {
      if (this.postType === 'notice') this.addAnnouncement()
      else if (this.postType === 'post') this.addPost()
    },
    getAnnouncements () {
      var announcementList = document.getElementById('announcementList')
      const announcementsLoading = this.$loading.service({
        target: announcementList
      })
      this.axios.post('getnotice', {
        partitionID: Number(this.$route.query.id)
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              this.announcements = response.data.noticeList
              this.forumName = response.data.partitionName
              announcementsLoading.close()
            } else {
              this.$notify({
                title: '获取公告失败',
                message: response.data.message,
                position: 'top-left'
              })
              announcementsLoading.close()
            }
          } else {
            this.$notify({
              title: '获取公告失败',
              message: '网络错误',
              position: 'top-left'
            })
            announcementsLoading.close()
          }
        })
        .catch(error => {
          console.log(error)
          announcementsLoading.close()
        })
    },
    getPosts () {
      var postList = document.getElementById('postList')
      const postsLoading = this.$loading.service({
        target: postList
      })
      this.axios.post('getpost', {
        partitionID: Number(this.$route.query.id)
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              this.posts = response.data.postList
              this.forumName = response.data.partitionName
              postsLoading.close()
            } else {
              this.$notify({
                title: '获取帖子失败',
                message: response.data.message,
                position: 'top-left'
              })
              postsLoading.close()
            }
          } else {
            this.$notify({
              title: '获取帖子失败',
              message: '网络错误',
              position: 'top-left'
            })
            postsLoading.close()
          }
        })
        .catch(error => {
          console.log(error)
          postsLoading.close()
        })
    },
    addAnnouncement () {
      console.log('add notice')
      this.axios.post('addnotice', {
        userID: this.$store.getters.userID,
        title: this.title,
        content: this.postContent,
        partitionID: Number(this.$route.query.id)
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              this.$notify({
                title: '发布公告成功',
                position: 'top-left'
              })
              this.title = ''
              this.$refs.editor.clear()
              window.scrollTo(0, 0)
              this.getAnnouncements()
            } else if (response.data.err === 2) {
              this.$notify({
                title: '发布公告失败',
                message: '您的权限不足',
                position: 'top-left'
              })
              this.title = ''
              this.$refs.editor.clear()
              this.$store.commit('setPower', response.data.userPower)
            } else if (response.data.err === 3) {
              this.$notify({
                title: '发布公告失败',
                message: '您的帐号已被封禁，已退出登录',
                position: 'top-left'
              })
              this.title = ''
              this.$refs.editor.logout()
              this.$store.commit('logout')
            } else {
              this.$notify({
                title: '发布公告失败',
                message: response.data.message,
                position: 'top-left'
              })
            }
          } else {
            this.$notify({
              title: '发布公告失败',
              message: '网络错误',
              position: 'top-left'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    addPost () {
      console.log('add post')
      this.axios.post('addpost', {
        userID: this.$store.getters.userID,
        userName: 'test name', // to be deleted
        title: this.title,
        content: this.postContent,
        partitionID: Number(this.$route.query.id)
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              this.$notify({
                title: '发布帖子成功',
                position: 'top-left'
              })
              this.title = ''
              this.$refs.editor.clear()
              window.scrollTo(0, 0)
              this.getPosts()
            } else if (response.data.err === 3) {
              this.$notify({
                title: '发布帖子失败',
                message: '您的帐号已被封禁，已退出登录',
                position: 'top-left'
              })
              this.title = ''
              this.$refs.editor.logout()
              this.$store.commit('logout')
            } else {
              this.$notify({
                title: '发布帖子失败',
                message: response.data.message,
                position: 'top-left'
              })
            }
          } else {
            this.$notify({
              title: '发布帖子失败',
              message: '网络错误',
              position: 'top-left'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  computed: {
    login () {
      return this.$store.getters.loginState
    },
    userPower () {
      return this.$store.getters.userPower
    }
  },
  mounted () {
    // get announcements
    this.getAnnouncements()

    // get posts
    this.getPosts()
  }
}
</script>

<style>
.topic {
  margin: 10px;
  font-weight: bold;
  font-size: 20px;
  color: #303133;
}
</style>
